<template>
	<view class="home">
		<view class="box">
			<view class="box_list">
				<view class="f1">意见反馈</view>
				<view style="margin-top: 20rpx;">
					<textarea v-model="data.content" class="txt" placeholder="请输入" style="width: 100%;"></textarea>
				</view>
				<view class="flex align-center flex-wrap" style="border: none; margin-top: 30rpx;"
					v-if="data.image.length>0">
					<image :src="item" mode="" style="margin-right: 10rpx; margin-bottom: 20rpx;" class="up_img"
						v-for="item,index in data.image" :key="index"></image>
				</view>
				<view v-if="data.image.length<4" class="flex_row list"
					style="align-items: flex-end; border: none; margin-top: 30rpx;">
					<view @click="uploadImage" class="up_img y_center flex_center">
						<view class="f3">+</view>
						<view>上传图片</view>
					</view>
					<view style="margin-left: 20rpx;">(非必填，限4张图片)</view>
				</view>
			</view>
		</view>
		<view class="y_center">
			<view @click="contact_support" class="box_but flex_center">提交</view>
		</view>
	</view>
</template>

<script>
	import config from '../../components/hzjc/config'
	export default {
		data() {
			return {
				data: {
					content: '',
					image: []
				},
			}
		},
		onLoad() {

		},
		methods: {
			contact_support() {
				
				this.rq.getData('Wechat/feedback', {
					content:this.data.content,
					image:this.data.image.join(',')
				}).then(res => {
					if (res.code == 1) {
						this.cn.toast(res.msg)
						this.data = {
							content: '',
							image: ''
						}
					}
				})
			},
			uploadImage() {
				var that = this
				uni.chooseImage({
					count: 4, // 默认9, 设置图片的选择数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表 tempFilePaths
						uni.showLoading()
						let files = res.tempFiles.map(item => item)
						console.log(files, 'files')
						files.forEach((item, index) => {
							uni.uploadFile({
								url: config.host + 'api/common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								success: (uploadFileRes) => {

									var filedata = JSON.parse(uploadFileRes.data)
									that.data.image.push(filedata.data.fullurl)
									uni.hideLoading()
								}
							});
						})

					},
					fail: (err) => {
						// 处理错误情况
						console.error(err);
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin: 40rpx;
	}

	.service {
		border-radius: 50rpx;
		padding: 40rpx 30rpx;
		background: #000;

		.service_img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.phone_img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
	}

	.txt {
		background: #f3f3f3;
		padding: 20rpx;
		border-radius: 30rpx;
	}

	.f1 {
		font-size: 30rpx;
		font-weight: bold;
	}

	.box_list {
		background: #FFF;
		box-shadow: 5px 5px 10px 0 rgba(186, 186, 186, 0.3);
		border-radius: 20px;
		padding: 40rpx 40rpx 40rpx 40rpx;

		.list {
			min-height: 100rpx;
			padding-bottom: 10rpx 0;
			margin-bottom: 10rpx;
			border-bottom: 2rpx solid #d1d1d1;

			.list_input {
				text-align: right;
			}
		}

		.box_list_img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.f2 {
			font-size: 26rpx;
		}

		.f3 {
			font-size: 75rpx;
		}

		.up_img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10px;
			background-color: #f3f5f7;
		}
	}

	.sex_box {
		border-radius: 10rpx;
		background: #000;
		color: #FFF;
		padding: 10rpx 40rpx;
	}

	.sex_box_b {
		border-radius: 10rpx;
		color: #000000;
		border: 2rpx solid #000;
		padding: 10rpx 40rpx;
	}

	.box_but {
		position: fixed;
		bottom: 100rpx;
		width: 80%;
		font-size: 34rpx;
		color: #FFF;
		padding: 30rpx 0;
		background: #000;
		border-radius: 50rpx;
	}

	.up_img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10px;
		background-color: #f3f5f7;
	}
</style>